<template>
    <el-row>
        <el-col :span="8" justify="center" align="middle" class="wrapper" v-if="!flag">
            <div class="grid">
                <el-avatar :size="50" :src="user.image" />
            </div>
            <div class="grid">用户名:{{ user.username }}</div>
            <div class="grid">邮箱:{{ user.mail }}</div>
            <el-link type="primary" v-if="!flag" @click="flag = true">点击编辑</el-link>
        </el-col>
        <el-form v-if="flag" :model="user" label-width="auto" style="max-width: 600px">
            <el-form-item label="用户名">
                <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="user.mail" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" type="password" />
            </el-form-item>
            <el-button type="primary" v-if="flag" @click="SubmitEvent()">点击保存</el-button>
        </el-form>
    </el-row>

</template>


<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import {editUser} from '../../api/index.js';

const flag = ref(false);

const user = ref(JSON.parse(localStorage.getItem('matrix-userInfo')));

// console.log(user.value);



const SubmitEvent = () => {

    editUser(user.value).then((data) => {
        
            console.log(data);
            localStorage.setItem('matrix-userInfo', JSON.stringify(user.value));
            flag.value = false;
        
    })

    flag.value = false;
}//保存逻辑
</script>


<style scoped lang="less">
.el-col {
    background-color: rgb(67, 67, 67);
    height: 100vh;

    .grid {
        color: white;
        margin-top: 20px;

        .el-avatar {
            width: 150px;
            height: 150px;
        }
    }
}
</style>